<template>
    <div id="myCard">
        <div class="cardBox container">
            <router-link to="{path:'/'}" class="rHome">
                <img src="/mother/static/img/my1.png">
            </router-link>
			<div class="cardMain clearfix">
				<ul class="clearfix">
					<li v-for="(item,key) in fileList" :key="key" class="cardOne">
						<p class="cImg">
							<img :src="item.greetingCard">
                            <router-link :to="{path:'/page',query:{'fid':item.cid}}" class="ll">浏览</router-link>
                            <router-link :to="{path:'/make',query:{'cid':cardList[key]['cid']}}" class="cz">重做</router-link>
						</p>						
					</li>
				</ul>
			</div>
		</div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                fileList:[],
                cardList:[],
                sid:sessionStorage.getItem('sid'),
            }
        },
        methods:{
            getData(){
                var _this=this
                this.$http.get(_this.httpurl('greetingCardText/getUserCards'), {params: {token: _this.sid}})
                .then((response)=>{
                    var data=response.data
                    this.fileList=data.card.reverse();
                    this.cardList=data.cardText.reverse();
                })
            }
        },
        mounted(){
            this.getData()
        }
    }
</script>

<style scoped>
.container{ width: 100vw; height: auto; min-height: 100vh; background:#c00}
.cardBox{position: relative;}
.cardBox .rHome{ display: block; width:35% ; height: auto; top:15px; left: 10px; position: fixed; z-index:99}
.cardBox .rHome img{ width: 100%; height: auto;}
.cardMain{ width: 100%; height: auto; padding-top: 80px;}
.cardMain ul li{ display: block; width: 44%; height: auto; float: left; margin-left: 4%; margin-bottom: 30px;}
.cardMain ul li p.cImg{ display: block; width: 96%; height: auto; background: #fff; padding: 3%; box-shadow: 0px 5px 10px #8A111B; position: relative;}
.cardMain ul li p.cImg img{ display: block; width: 100%; height: auto;}
.cardMain ul li p.cImg a.ll{ display: block; position: absolute; background: #000; padding: 5px 15px; left: 10px;bottom: 10px; color: #fff; font-size: 12px; text-decoration: none; border-radius: 100px;}
.cardMain ul li p.cImg a.cz{ display: block; position: absolute; background: #000; padding: 5px 15px; right: 10px;bottom: 10px; color: #fff; font-size: 12px; text-decoration: none; border-radius: 100px;}

</style>
